<template>
    <el-dialog v-model="dialogVisible" width="90%" append-to-body :close-on-click-modal="false">
        <div class="notice-container">
            <div class="header-view">
                <div class="student-view">
                    <img src="@/assets/images/person-alt.png" alt="">
                    <div class="text-view">
                        <div>姓名：{{ userInfo.userName }}</div>
                        <div>性别：{{ userInfo.sex }}</div>
                        <div>手机号码：{{ userInfo.phone }}</div>
                    </div>
                </div>
                <div class="title" style="margin-left: -50px;">{{ userInfo.exameTitle }}</div>
                <div class="exame-button">
                    <img style="width: 21px;height: 22px; margin-right: 7px;" src="@/assets/images/shizhong.png" />
                    <div style="margin-right: 20px;">考试时间：<span style="">{{ userInfo.paperTime }}分钟</span></div>
                </div>
            </div>
            <div class="center-view">
                <h2 style="width: 100%;text-align: center;">考试须知</h2>
                <h4 class="title-1">考试前准备</h4>
                <h4 class="title-2">1. 设备与网络准备：</h4>
                <p>确保使用的电脑或平板电脑配置良好，操作系统兼容考试平台。
                    测试网络连接，确保考试期间网络稳定。
                    保证设备电量充足或连接电源。</p>
                <h4 class="title-2">2. 软件安装与测试：</h4>
                <p>提前安装考试所需的任何软件或浏览器插件。
                    进行模拟测试以熟悉考试界面和流程。</p>
                <h4 class="title-2">3. 考试规则阅读：</h4>
                <p>认真阅读考试指南及规则，包括考试时间、答题规则等。
                    理解考试评分标准和计时规则。</p>
                <h4 class="title-2">4. 身份验证准备：</h4>
                <p>准备好有效的身份证明文件用于身份验证。
                    确认考试平台是否需要生物识别认证（如面部识别）。</p>
                <h4 class="title-2">5. 环境布置：</h4>
                <p>选择一个安静、明亮、无干扰的考试环境。
                    确保摄像头可以清晰拍摄到你的头部和肩部区域。</p>
                <h4 class="title-2">6. 备用方案：</h4>
                <p>准备好应对突发状况的方案，例如备用设备或紧急联系信息。</p>


                <h4 class="title-1">考试中注意事项</h4>
                <h4 class="title-2">1. 遵守考试时间：</h4>
                <p>根据考试开始时间准时登录考试系统。
                    注意考试倒计时，合理分配时间。</p>
                <h4 class="title-2">2. 诚信考试：</h4>
                <p>严格遵守考试规则，不得作弊。
                    不得与他人交流考试内容或使用未经授权的材料。</p>
                <h4 class="title-2">3. 保存与提交：</h4>
                <p>定期保存答案以防意外丢失。
                    提交前仔细检查所有答案。</p>
                <h4 class="title-1">考试后</h4>
                <h4 class="title-2">1. 正式提交：</h4>
                <p>确认答案无误后，根据指示提交试卷。</p>
                <h4 class="title-2">2. 退出考试系统：</h4>
                <p>提交后按指示安全退出考试系统。</p>
                <h4 class="title-2">3. 反馈问题：</h4>
                <p>如果考试过程中遇到技术问题或有其他疑问，应及时记录下来并向相关部门反馈。</p>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-checkbox v-model="agree" class="tongyi-checkbox" label="我已阅读并同意" />
                <el-button class="tongyi-btn" type="primary" @click="handleSubmit">开始答卷</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
const emits = defineEmits(["update:visible", "finish"]);
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    userInfo: {
        type: Object,
        default: ()=> { return [] },
    },
});
//
const dialogVisible = computed({
    get: () => {
        return props.visible;
    },
    set: (value) => {
        emits("update:visible", value);
    },
});
const agree = ref(false)
watch(() => props.visible, value => {
    if(!value) {
        agree.value = false
    }
});
// 提交
const handleSubmit = () => {
    if (!agree.value) {
        ElMessage.warning('请先同意考试须知')
        return
    }
    emits('finish')
    dialogVisible.value=false
};
</script>
<style lang="scss" scoped>
@import './index.scss'
</style>